import { css } from "@emotion/react";
import { useAppToken } from "theme";

export const useStyle = () => {
  const { token } = useAppToken();

  return {
    mainClassName: css`
      display: flex;
      width: 100%;
      height: 100%;
      padding-top: 16px;
      padding-bottom: 16px;
      overflow: auto;
    `,
    leftMenuClassName: css`
      width: 224px;
      border-right: 0.8px solid ${token.colorBorderSecondary};
    `,
    avatarClassName: css`
      text-align: center;
      overflow: hidden;
    `,
    avatarImg: css`
      width: 144px;
      height: 144px;
      border-radius: 50%;
      margin-bottom: 12px;
    `,
    nameClassName: css`
      margin-bottom: 4px;
      font-weight: 500;
      color: ${token.colorTextHeading};
      font-size: ${token.fontSizeHeading4}px;
    `,
    rightClassName: css`
      flex: 1;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 40px;
      padding-right: 40px;
    `,
    titleClassName: css`
      margin-bottom: 12px;
      font-weight: 500;
      color: ${token.colorTextHeading};
      font-size: ${token.fontSizeHeading4}px;
    `,
  };
};
